<template>
  <view>
    <view class="box">
      <view class="menu_content_box">
        <view class="back_btn_pos" @tap="back"><image src="/static/icon_arrow_7.png" class="img6" style="margin-top: 40rpx;"></image></view>
        <view class="re">
          <view class="bg_area_1">
            <view class="fs50 cor_fff">登录</view>
            <view class="mt30 fs45 cor_fff">Welcome back</view>
          </view>
          <image src="/static/bg_img_1.png" class="wp100" mode="widthFix"></image>
        </view>
        
        <view class="re pl30 pr30" style="margin-top: -200rpx;z-index: 2;">
          <view class="area_block_1">
            <view class="flex_box aic">
              <view class="mr5 fs30 cor_201">手机号:</view>
              <view class="item bb1"><input type="text" class="ipt_01" v-model="phone" placeholder-style="color: #999;"></view>
            </view>
            <view class="mt60 flex_box aic">
              <view class="mr5 fs30 cor_201">验证码:</view>
              <view class="item bb1 ov">
                <view class="flex_box aic">
                  <view class="item"><input type="text" class="ipt_01" v-model="code"  placeholder-style="color: #999;"></view>
				    <view class="fs30 cor_ED3" v-show="show" @tap="getCode" style="line-height: 72rpx;">获取验证码</view>
					<!-- 倒计时 -->
					<view class="fs30 cor_ED3"  v-show="!show">{{count}} s</view>
                </view>
               </view>
            </view>
<!--            <view class="mt45 fs22 cor_201 tar">密码登录</view> -->
            
          </view>
          
          <!-- 立即登录-按钮 -->
          <view class="re tac" style="margin-top: -44rpx;z-index: 2;"><view class="sign_now_btn" @tap="codeLogin">立即登录</view></view>
          
        </view>
        
        <view class="df aic jcc" style="margin-top: 138rpx;">
          <view class="line_hor_sty"></view>
          <view class="ml20 mr20 fs24 cor_201">第三方快速登录</view>
          <view class="line_hor_sty"></view>
        </view>
        
        <view class="flex_box aic tac" style="padding: 0 197rpx;margin-top: 82rpx;">
          <view class="item"><image src="/static/icon_wechart.png" class="vt img10" @tap="login_weixin()"></image> </view>
          <!-- <view class="item"><image src="/static/icon_Alipay.png" class="vt img10" @tap="login_ali()"></image>  </view> -->
        </view>
        
        <view class="mt60 fs24 cor_201 tac">首次登录将为您创建账户，且代表您已同意 <text class="cor_007" @tap="toAgreement('/pages/agreement/statement')">服务协议</text></view>
        
      </view>
    </view><!-- box -->
  </view>
</template>

<script>
	// #ifdef APP-PLUS
	const AFPlugin = uni.requireNativePlugin('szjingyu-alipay');
	// #endif
  
  import { toast, showLoading, hideLoading } from '@/utils/toast.js';
  import { getPhoneIdCodeApi, phoneLoginApi, aliLoginApi, wxLoginApi } from '@/http/api.js';
  export default {
    data() {
      return {
		phone: '',
		code: '',
		show: true,
		count: '',
		timer: null,
		client: {}
      }
    },
	onLoad() {
		
		// #ifdef APP-PLUS
		const client = plus.push.getClientInfo();
		this.client = client;
		console.log(client,'0000000000000000')
		// #endif
		// #ifdef H5
		const client = '123564'
		// #endif
	},
    methods: {
		//获取验证码
		getCode() {
			console.log(this.phone)
			if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
				toast('手机号不合法，请重新输入');
				return false;
			}	
			getPhoneIdCodeApi({
				phone: this.phone
			}).then(res=>{
				toast('短信发送成功！');
				console.log(res)
				const TIME_COUNT = 60;
			   if (!this.timer) {
				 this.count = TIME_COUNT;
				 this.show = false;
				 this.timer = setInterval(() => {
				 if (this.count > 0 && this.count <= TIME_COUNT) {
				   this.count--;
				  } else {
				   this.show = true;
				   clearInterval(this.timer);
				   this.timer = null;
				  }
				 }, 1000)
				}
			}).catch(err=>{
				console.log(err)
				toast('短信发送失败！');
			})
		},
		
		//登录
		codeLogin() {
			if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
				toast('手机号不合法，请重新输入');
				return false;
			}	
			if (!this.code) {
				toast('请输入验证码');
				return false;
			}
			console.log(this.client);
			phoneLoginApi({
				phone: this.phone,
				identifyCode: this.code,
				cid: this.client.clientid
			}).then(res=>{
				try {
					uni.setStorageSync('phone', res.data.phone);
					uni.setStorageSync('userInfo', res.data);
					uni.setStorageSync('userId', res.data.id);
					uni.setStorageSync('beCompleteInfo', res.data.beCompleteInfo);
					toast('登录成功');
					
					if (res.data.beCompleteInfo) {
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 2000);
					} else {
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/personal_information/personal_information'
							});
						}, 2000);
					}
						
				} catch (e) {
				    toast('缓存失败');
				}
			}).catch(err=>{
				toast(err.msg);
			})
		},
		
		//支付宝登录
		login_ali() {
			var that = this;
			
			const url = 'https://authweb.alipay.com/auth?' +
			  Object.entries({
				auth_type: 'PURE_OAUTH_SDK',
				app_id: '2021002147661941', // 填写 alipay appid
				scope: 'auth_user',
				state: '',
			}).map(([key, value]) => `${key}=${value}`).join('&');
			console.log(url);
			AFPlugin.auth({ url, scheme: 'alipaydemo' },  data => {
				console.log(data.data.auth_code,'授权码');
				console.log(that.client.clientid,'个推ID');
				aliLoginApi({
					authCode: data.data.auth_code,
					cid: that.client.clientid
				}).then(res=>{
					try {
						uni.setStorageSync('phone', res.data.phone);
						uni.setStorageSync('userInfo', res.data);
						uni.setStorageSync('userId', res.data.id);
						uni.setStorageSync('beCompleteInfo', res.data.beCompleteInfo);
						toast('登录成功');
						
						if (res.data.beCompleteInfo) {
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 2000);
						} else {
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/personal_information/personal_information'
								});
							}, 2000);
						}
					} catch (e) {
					    toast('缓存失败');
					}
				}).catch(err=>{
					console.log('aliauthlogin false');
					console.log(err);
				})
			});
		},
		//微信登录
		login_weixin() {
			let _this = this;
			console.log('点我授权微信了');
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// console.log(loginRes.authResult.openid, '授权结果')
					// console.log(loginRes.code,'授权码');
					// console.log(_this.client.clientid,'个推ID');
					// console.log('微信授权成功')	
					// console.log(loginRes)
					wxLoginApi({
						openId: loginRes.authResult.openid,
						accessToken: loginRes.authResult.access_token,
						access_token: loginRes.authResult.access_token,
						cid: _this.client.clientid,					
						// {
						// 	"authResult": {
						// 		"access_token": "48_RynIefMcEvFyWn-HHto63wyNtY4i5XjyMzOIEO8R5w9gGT-hSfdvv-LesipmLLYMlGJzwJqp9UuPVWQqJ8Yj34CS-LqJzU27MXyHnhfInl4",
						// 		"expires_in": 7200,
						// 		"refresh_token": "48_9PlJ9cU8RSrnSe5oeKbtif8Q0psgPyG8fxcuanZkwMbokpel0sMYokjqm1FupDKuUbMeohArS0Yesu60QPiUjQqje4NR2k3bTGA_d4qSUuc",
						// 		"openid": "o8Hf155o9S2x7iUwYQ3CXs8Dc4Hg",
						// 		"scope": "snsapi_userinfo",
						// 		"unionid": "osmvU6HSRy8Pzb3S8gj0Aw35UMc8"
						// 	},
						// 	"errMsg": "login:ok"

					}).then(res=>{
						try {
							uni.setStorageSync('phone', res.data.phone);
							uni.setStorageSync('userInfo', res.data);
							uni.setStorageSync('userId', res.data.id);
							uni.setStorageSync('beCompleteInfo', res.data.beCompleteInfo);
							toast('登录成功');
							
							if (res.data.beCompleteInfo) {
								setTimeout(function() {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 2000);
							} else {
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/personal_information/personal_information'
									});
								}, 2000);
							}
						} catch (e) {
						    toast('缓存失败');
						}
					}).catch(err=>{
						console.log(err);
						console.log('weixinlogin false');
					})
				},
				fail: function(loginErr){
					console.log('授权失败');
					console.log(loginErr)
				},
				complete: function(loginComplete){
					console.log('授权结果，不管正确与否');
					console.log(loginComplete)
				}
			});
		},
		
		
		toAgreement(url) {
			
			uni.navigateTo({
				url: url
			})
		},
		
		
		back() {
			uni.redirectTo({
				url: '/pages/index/index'
			})	
		}
		
    }
  }
</script>

<style>
  .menu_content_box {
      position: relative;
      height: 100vh;
      background-color: #fff;
    }
    .bg_area_1 {
      position: absolute;
      top: 0;
      left: 0;
      padding: 171rpx 73rpx 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      overflow: hidden;
    }
    .area_block_1 {
      padding: 88rpx 50rpx 119rpx 44rpx;
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 0 20rpx #ddd5d5;
    }
    .ipt_01 {
      display: inline-block;
      width: 100%;
      padding: 0 15rpx;
      height: 72rpx;
      line-height: 72rpx;
      font-size: 30rpx;
      color: #000;
      background-color: #fff;
      border-radius: 0;
      outline: none;
    }
    .sign_now_btn {
      display: inline-block;
      width: 351rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      color: #fff;
      background-color: #ed3726;
      border-radius: 44rpx;
    }
    .line_hor_sty {
      width: 248rpx;
      height: 2rpx;
      background-color: #959595;
    }
    .back_btn_pos {
      position: absolute;
      top: 35rpx;
      left: 35rpx;
      z-index: 3;
    }
</style>
